<template>
  <div class="buttons">
    <!-- 站内消息 -->
    <Bell v-if="isMounted" />
    <PCVue class="pc" />
    <MobileVue class="mobile" />
  </div>
</template>

<script setup lang="ts">
import PCVue from "./Buttons/PC.vue";
import MobileVue from "./Buttons/Mobile.vue";
import Bell from "./Bell.vue";
import { nextTick, onMounted, ref } from "vue";
const isMounted = ref(false);

onMounted(async () => {
  await nextTick();
  isMounted.value = true;
});
</script>
<style scoped lang="less">
.buttons {
  display: flex;
  align-items: center;
}
.pc {
  display: block;
}
.mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .mobile {
    display: block;
  }
  .buttons {
    gap: 123px;
  }
}
</style>
